<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/layui/lay/modules/layer.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            用户信息修改
        </div>
        <div class="container-fluid common_con">
            <form class="form-horizontal article_form" id="form">
                <div class="form-group">
                    <label for="inputEmail1" class="col-sm-2 control-label">用户名称：</label>
                    <div class="col-sm-4">
                        <input type="text" name="username" class="form-control username" id="username" value="李思思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail2" class="col-sm-2 control-label">昵称：</label>
                    <div class="col-sm-4">
                        <input type="text" name="nickname" class="form-control nickname" id="nickname" value="哈哈思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label>
                    <div class="col-sm-4">
                        <input type="email" name="email" class="form-control email" id="email" value="520@163.com">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">用户图标：</label>
                    <div class="col-sm-10">
                        <img src="images/2.jpg" alt="" class="user_pic">
                        <input style="display: block" name="userPic" type="file" id="exampleInputFile"
                            onchange="changeImage()">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail4" class="col-sm-2 control-label">密码：</label>
                    <div class="col-sm-4">
                        <input type="password" name="password" class="form-control password" id="password"
                            value="12345678">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-success btn-edit">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="./js/http.js"></script>
    <script>
        $(function () {

            get_user_info()


            register_form_submit()
        })

        //获取服务器的数据到页面
        function get_user_info() {

            myAjax('get', 'http:localhost:8080/api/v1/admin/user/detail', null, function (resData) {

                let data = resData.data;
                $('#username').val(data.username)
                $('#nickname').val(data.nickname)
                $('#email').val(data.email)
                $('.user_pic').attr('src', data.userPic)
                $('#password').val(data.password)
            });
        }


        //注册表单
        function register_form_submit() {

            $('#form').submit(function (e) {
                e.preventDefault();


                //收集页面元素实例化到FOrmData中
                let formData = new FormData;
                formData.append('username', $('#username').val())
                formData.append('nickname', $('#nickname').val())
                formData.append('email', $('#email').val())
                let file = document.querySelector('#exampleInputFile').files[0];
                formData.append('userPic', file)
                formData.append('password', $('#password').val())


                //将formData 数据发给服务器
                myAjax('POST', 'http:localhost:8080/api/v1/admin/user/edit', formData, function (resData) {

                    if (resData.code !== 200) {
                        layer.msg(resData.msg);
                        return;
                    }

                    //提示成功信息
                    layer.msg('修改用户信息成功')



                })

                // 5.0 由于user.html是在iframe中的，此时要通过js代码去更新index.html中的用户头像和昵称
                // 通过window.parent.get_userInfo()代码一定要使用http协议打开页面，使用file协议打开的页面执行不成功的
                window.parent.get_user_info()

            })

        }












        //图片本地上传
        function changeImage() {
            //获取file控件中选择的图片
            let file = document.querySelector('#exampleInputFile').files[0];

            //将文件生成一个本地可以访问的路径.
            let filePath = URL.createObjectURL(file)
            // alert(111)
            //将本地路径设置给img的src.
            $('.user_pic').attr('src', filePath)
        }
    </script>





</body>




</html>